<%--
  Created by IntelliJ IDEA.
  User: WuYixin
  Date: 2022/6/9
  Time: 08:03
  To change this template use File | Settings | File Templates.
--%>
<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8" %>
<%@taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>

<%
    String path = request.getContextPath();
%>

<!DOCTYPE html>
<html>

<head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
    <script src="<%=path%>/resource/bs/js/jquery-1.11.1.js"></script>    <!-- 引入jquery -->
    <link rel="stylesheet" href="<%=path%>/resource/bs/css/bootstrap.css"> <!-- 引入bootstrap.css -->
    <script src="<%=path%>/resource/bs/js/bootstrap.min.js"></script><!-- 引入bootstrap.min.js -->
    <title>图书展示页面</title>
</head>
<style>
    /*全屏显示大图*/
    .opacityBottom{
        width: 100%;
        height: 100%;
        position: fixed;
        background:rgba(0,0,0,0.8);
        z-index:1000;
        top: 0;
        left: 0
    }
    .none-scroll{
        overflow: hidden;
        height: 80%;
    }
    .bigImg{
        width:80%;
        height: 80%;
        left:10%;
        top:10%;
        position:fixed;
        z-index: 10001;
    }
</style>

<body>
<nav aria-label="breadcrumb">
    <ol class="breadcrumb">
        <li style="font-size: xx-large" >图书信息管理系统</li>
        <li class="breadcrumb-item" style="font-size: xx-large;" ><a onclick="logout()">注销登录</a></li>

    </ol>
</nav>


<br>
<br>
<br>
<section class="container">
    <div class="row">
        <div class="col-md-3">
            <button class="btn btn-danger" style="size: landscape" data-toggle="modal" data-target="#addModal">录入
            </button>
        </div>
    </div>


    <table class="table table-striped table-bordered table-hover">
        <th>图书ID</th>
        <th>图书名称</th>
        <th>图片缩略图</th>
        <th>作者</th>
        <th>出版社</th>
        <th>市场价格</th>
        <th>销售价格</th>

        <th>操作</th>
        <c:forEach items="${page.dataList}" var="list">
            <tr>
                <td>${list.b_id }</td>
                <td>${list.b_name }</td>
                <td><img src="${list.b_image}" class="image_click" alt="" style="height: 100px;weight: 100px;" οnclick=""  ></td>
                    <%--                <td>${list.bt_id }</td>--%>
                <td>${list.b_author }</td>
                    <%--                <td>${list.b_isbn }</td>--%>
                <td>${list.b_publisher }</td>
                    <%--                <td>${list.b_date }</td>--%>
                <td>${list.b_marketprice }</td>
                <td>${list.b_saleprice }</td>

                    <%--                <td>${list.b_quality }</td>--%>
                    <%--                <td>${list.b_sales }</td>--%>
                <td colspan="2">
                    <button class="btn btn-primary edBtn" data-toggle="modal" data-target="#edModal"
                            value="${list.b_id}" b_name="${ list.b_name}" b_author="${ list.b_author}" b_publisher="${ list.b_publisher}"
                            b_marketprice="${list.b_marketprice}" b_saleprice="${list.b_saleprice}" <%--  bt_id="${list.bt_id}"--%>
                            b_quality="${list.b_quality} "b_sales="${list.b_sales} " b_date="${list.b_date}" b_isbn="${list.b_isbn}"
                            b_image="${list.b_image }" b_text="${list.b_text }"
                    >编辑
                    </button>

                    <button class="btn btn-primary edBtn" data-toggle="modal" data-target="#edModal"
                            value="${list.b_id}" b_name="${ list.b_name}" b_author="${ list.b_author}" b_publisher="${ list.b_publisher}"
                            b_marketprice="${list.b_marketprice}" b_saleprice="${list.b_saleprice}" <%--  bt_id="${list.bt_id}"--%>
                            b_quality="${list.b_quality} "b_sales="${list.b_sales} " b_date="${list.b_date}" b_isbn="${list.b_isbn}"
                            b_image="${list.b_image }" b_text="${list.b_text }"
                    >详细
                    </button>

                    <button class="btn btn-danger delBtn" data-toggle="modal" data-target=".delModal"
                            value="${list.b_id }">删除
                    </button>

                </td>
            </tr>
        </c:forEach>
    </table>
    <div class="pager">
        <ul>
            <c:if test="${page.hasPrePage}">
                <li><a href="${pageContext.request.contextPath}/findAllServlet?pageNum=${page.pageNum-1}">上一页</a></li>
            </c:if>
            <c:if test="${!page.hasPrePage}">
                <li><li><a href="findAllServlet?pageNum=1">首页</a></li></li>
            </c:if>
            <c:forEach begin="1" end="${page.total}" var="each">
                <c:choose>
                    <c:when test="${each == page.pageNum}">
                        <li class="active"><a style="color:black;">${each}</a></li>
                    </c:when>
                    <c:when test="${each >= (page.pageNum - 2) && each <= (page.pageNum + 2)}">
                        <li><a href="${pageContext.request.contextPath}/findAllServlet?pageNum=${each}">${each}</a></li>
                    </c:when>
                </c:choose>
            </c:forEach>
            <c:if test="${page.hasNextPage}">
                <li><a href="${pageContext.request.contextPath}/findAllServlet?pageNum=${page.pageNum+1}">下一页</a></li>
            </c:if>
            <c:if test="${!page.hasNextPage}">
                <li><li><a href="findAllServlet?pageNum=${page.total}">尾页</a></li></li>
            </c:if>
        </ul>
    </div>


</section>

</body>

<!-- 删除模态框 -->
<div class="modal fade delModal" tabindex="-1" role="dialog"
     aria-labelledby="gridSystemModalLabel">
    <div class="modal-dialog" role="document">
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                    <span aria-hidden="true">&times;</span>
                </button>
                <h4 class="modal-title" id="gridSystemModalLabel">提示</h4>
            </div>
            <div class="modal-body">
                <h4>确定删除吗?</h4>
            </div>
            <div class="modal-footer">
                <form action="DelServlet">
                    <input id="delid" name="id" value="" hidden>
                    <button type="button" class="btn btn-primary" data-dismiss="modal">取消</button>
                    <button type="submit" class="btn btn-danger">删除</button>
                </form>
            </div>
        </div>
        <!-- /.modal-content -->
    </div>
    <!-- /.modal-dialog -->
</div>
<!-- /.modal -->

<!-- 编辑模态框 -->
<div class="modal fade" id="edModal" tabindex="-1" role="dialog" aria-labelledby="edModal">
    <div class="modal-dialog" role="document">
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                    <span aria-hidden="true">&times;</span>
                </button>
                <h4 class="modal-title" id="exampleModalLabel">图书信息编辑</h4>
            </div>
            <form action="UpdateServlet" method="post">
                <div class="modal-body">
                    <input id="b_id" name="b_id" value="" hidden>


                    <div class="form-group">
                        <label for="b_text" class="control-label">简介:</label> <textarea
                            type="text" name="b_text" class="form-control"  id="b_text"
                            value="${book.b_text }" required></textarea>
                    </div>

                    <div class="form-group">
                        <label for="b_name" class="control-label">图书名称:</label> <input
                            type="text" name="b_name" class="form-control" id="b_name"
                            value="${book.b_name }" required>
                    </div>

                    <div class="form-group">
                        <label for="b_author" class="control-label">作者:</label> <input
                            type="text" name="b_author" class="form-control" id="b_author"
                            value="${book.b_author }" required>
                    </div>

                    <div class="form-group">
                        <label for="b_isbn" class="control-label">ISBN:</label> <input
                            type="text" name="b_isbn" class="form-control" id="b_isbn"
                            value="${book.b_isbn}" required>
                    </div>

                    <div class="form-group">
                        <label for="b_publisher" class="control-label">出版社:</label> <input
                            type="text" name="b_publisher" class="form-control" id="b_publisher"
                            value="${book.b_publisher}" required>
                    </div>

                    <div class="form-group">
                        <label for="b_date" class="control-label">出版日期:</label> <input
                            type="text" name="b_date" class="form-control" id="b_date"
                            value="${book.b_date }" required>
                    </div>

                    <div class="form-group">
                        <label for="b_marketprice" class="control-label">市场价格:</label> <input
                            type="text" name="b_marketprice" class="form-control" id="b_marketprice"
                            value="${book.b_marketprice }" required>
                    </div>

                    <div class="form-group">
                        <label for="b_saleprice" class="control-label">销售价格:</label> <input
                            type="text" name="b_saleprice" class="form-control" id="b_saleprice"
                            value="${book.b_saleprice }" required>
                    </div>


                    <div class="form-group">
                        <label for="b_quality" class="control-label">库存:</label> <input
                            type="text" name="b_quality" class="form-control" id="b_quality"
                            value="${book.b_quality }" required>
                    </div>

                    <div class="form-group">
                        <label for="b_sales" class="control-label">销售:</label> <input
                            type="text" name="b_sales" class="form-control" id="b_sales"
                            value="${book.b_sales }" required>
                    </div>

                    <div class="form-group">
                        <label for="b_image" class="control-label">图片:</label>

                        <textarea type="text" name="b_image" class="form-control" style="display: none " id="b_image"
                            value="${book.b_image}" required></textarea>

                        <div class="layui-upload-list">
                            <img class="layui-upload-img"  id="base64Img" src="" style="" width="300px" height="300px;">
                        </div>
                        <input  type="file" id="image" lay-verify="required" onchange="toBase64()" accept="image/jpeg,image/png,image/jpg" class="layui-upload-button,form-control">

                    </div>

                </div>


                <div class="modal-footer">
                    <button type="button" class="btn btn-default" data-dismiss="modal">取消</button>
                    <button type="submit" class="btn btn-primary">更新</button>
                </div>
            </form>
        </div>
    </div>
</div>

<!-- 详细模态框 -->
<div class="modal fade" id="detModal" tabindex="-1" role="dialog" >
    <div class="modal-dialog" role="document">
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                    <span aria-hidden="true">&times;</span>
                </button>
                <h4 class="modal-title">图书信息编辑</h4>
            </div>
            <form method="post">
                <div class="modal-body">
                    <input name="b_id" value="" hidden>


                    <div class="form-group">
                        <label for="b_text" class="control-label">简介:</label> <textarea
                            type="text" name="b_text" class="form-control"
                            value="${book.b_text }" required></textarea>
                    </div>

                    <div class="form-group">
                        <label for="b_name" class="control-label">图书名称:</label> <input
                            type="text" name="b_name" class="form-control"
                            value="${book.b_name }" required>
                    </div>

                    <div class="form-group">
                        <label for="b_author" class="control-label">作者:</label> <input
                            type="text" name="b_author" class="form-control"
                            value="${book.b_author }" required>
                    </div>

                    <div class="form-group">
                        <label for="b_isbn" class="control-label">ISBN:</label> <input
                            type="text" name="b_isbn" class="form-control"
                            value="${book.b_isbn}" required>
                    </div>

                    <div class="form-group">
                        <label for="b_publisher" class="control-label">出版社:</label> <input
                            type="text" name="b_publisher" class="form-control"
                            value="${book.b_publisher}" required>
                    </div>

                    <div class="form-group">
                        <label for="b_date" class="control-label">出版日期:</label> <input
                            type="text" name="b_date" class="form-control"
                            value="${book.b_date }" required>
                    </div>

                    <div class="form-group">
                        <label for="b_marketprice" class="control-label">市场价格:</label> <input
                            type="text" name="b_marketprice" class="form-control"
                            value="${book.b_marketprice }" required>
                    </div>

                    <div class="form-group">
                        <label for="b_saleprice" class="control-label">销售价格:</label> <input
                            type="text" name="b_saleprice" class="form-control"
                            value="${book.b_saleprice }" required>
                    </div>


                    <div class="form-group">
                        <label for="b_quality" class="control-label">库存:</label> <input
                            type="text" name="b_quality" class="form-control"
                            value="${book.b_quality }" required>
                    </div>

                    <div class="form-group">
                        <label for="b_sales" class="control-label">销售:</label> <input
                            type="text" name="b_sales" class="form-control"
                            value="${book.b_sales }" required>
                    </div>

                    <div class="form-group">
                        <label for="b_image" class="control-label">图片:</label> <textarea
                            type="text" name="b_image" class="form-control"
                            value="${book.b_image }" required></textarea>
                    </div>

                </div>


                <div class="modal-footer">
                    <button type="button" class="btn btn-default" data-dismiss="modal">取消</button>
                </div>
            </form>
        </div>
    </div>
</div>

<!-- 添加模态框 -->
<div class="modal fade" id="addModal" tabindex="-1" role="dialog"
     aria-labelledby="edModal">
    <div class="modal-dialog" role="document">
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal"
                        aria-label="Close">
                    <span aria-hidden="true">&times;</span>
                </button>
                <h4 class="modal-title" id="exampleModalLabel">图书信息录入</h4>
            </div>
            <form action="addServlet" method="post">
                <div class="modal-body">
                    <input id="b_id" name="b_id" value="" hidden>


                    <div class="form-group">
                        <label for="b_name" class="control-label">图书名称:</label> <input
                            type="text" name="b_name" class="form-control" value="" required>
                    </div>

                    <div class="form-group">
                        <label for="b_author" class="control-label">作者:</label> <input
                            type="text" name="b_author" class="form-control" value="" required>
                    </div>
                    <div class="form-group">
                        <label for="b_isbn" class="control-label">ISBN:</label> <input
                            type="text" name="b_isbn" class="form-control" value="" required>
                    </div>
                    <div class="form-group">
                        <label for="b_publisher" class="control-label">出版社:</label> <input
                            type="text" name="b_publisher" class="form-control" value="" required>
                    </div>
                    <div class="form-group">
                        <label for="b_date" class="control-label">出版日期:</label> <input
                            type="text" name="b_date" class="form-control" value="" required>
                    </div>
                    <div class="form-group">
                        <label for="b_marketprice" class="control-label">市场价格:</label> <input
                            type="text" name="b_marketprice" class="form-control" value="" required>
                    </div>
                    <div class="form-group">
                        <label for="b_saleprice" class="control-label">销售价格:</label> <input
                            type="text" name="b_saleprice" class="form-control" value="" required>
                    </div>

                    <div class="form-group">
                        <label for="b_quality" class="control-label">库存:</label> <input
                            type="text" name="b_quality" class="form-control" value="" required>
                    </div>

                    <div class="form-group">
                        <label for="b_sales" class="control-label">销量:</label> <input
                            type="text" name="b_sales" class="form-control" value="" required>
                    </div>

                    <div class="form-group">
                        <label for="b_text" class="control-label">简介:</label> <textarea
                            type="text" name="b_text" class="form-control" value="" required></textarea>

                    </div>

                    <div class="form-group">
                        <label for="b_image" class="control-label">图片:</label> <textarea
                            type="text" name="b_image" class="form-control" value="" required></textarea>

                    </div>

                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-default" data-dismiss="modal">取消</button>
                    <button type="submit" class="btn btn-primary">添加</button>
                </div>
            </form>
        </div>
    </div>
</div>

<script type="text/javascript">

    // 登出按钮
    function logout(){
        window.location = "/LogoutServlet";

    }
    // 删除按钮
    $(".delBtn").on("click", function () {
        $("#delid").val($(this).val());
    });

    // 详细按钮
    $(".detBtn").on("click", function () {
        $("#b_id").val($(this).val());
        $("#b_name").val($(this).attr("b_name"));
        $("#b_author").val($(this).attr("b_author"));
        $("#b_publisher").val($(this).attr("b_publisher"));
        $("#b_marketprice").val($(this).attr("b_marketprice"));

        $("#b_saleprice").val($(this).attr("b_saleprice"));
        $("#b_isbn").val($(this).attr("b_isbn"));
        $("#b_sales").val($(this).attr("b_sales"));
        $("#b_quality").val($(this).attr("b_quality"));
        $("#b_date").val($(this).attr("b_date"));

        $("#b_image").val($(this).attr("b_image"));
        $("#b_text").val($(this).attr("b_text"));
    });

    // 编辑按钮
    $(".edBtn").on("click", function () {
        $("#b_id").val($(this).val());
        $("#b_name").val($(this).attr("b_name"));
        $("#b_author").val($(this).attr("b_author"));
        $("#b_publisher").val($(this).attr("b_publisher"));
        $("#b_marketprice").val($(this).attr("b_marketprice"));

        $("#b_saleprice").val($(this).attr("b_saleprice"));
        $("#b_isbn").val($(this).attr("b_isbn"));
        $("#b_sales").val($(this).attr("b_sales"));
        $("#b_quality").val($(this).attr("b_quality"));
        $("#b_date").val($(this).attr("b_date"));

        $("#b_image").val($(this).attr("b_image"));
        $("#b_text").val($(this).attr("b_text"));
    });

    $(function () {
        $("ul.pagination li.disabled a").click(function () {
            return false;
        });
    });

    //点击缩略图显示大图
    $(".image_click").click(function () {
        var imgsrc = $(this).attr("src");
        var opacityBottom = '<div id="opacityBottom" style="display: none"><img class="bigImg" src="'+ imgsrc +'" ></div>';
        $(document.body).append(opacityBottom);
        toBigImg();//变大函数
    });

    function toBigImg(){
        $("#opacityBottom").addClass("opacityBottom");
        $("#opacityBottom").show();
        $("html,body").addClass("none-scroll");//下层不可滑动
        $(".bigImg").addClass("bigImg");
        /*隐藏*/
        $("#opacityBottom").bind("click",clickToSmallImg);
        $(".bigImg").bind("click",clickToSmallImg);
        var imgHeight = $(".bigImg").prop("height");
        if(imgHeight < h){
            $(".bigImg").css({"top":(h-imgHeight)/2 + 'px'});
        }else{
            $(".bigImg").css({"top":'0px'});
        }
        function clickToSmallImg() {
            $("html,body").removeClass("none-scroll");
            $("#opacityBottom").remove();
        }
    };
/**
 * new
 * **/
    function toBase64(){
        var file = document.querySelector('input[type=file]').files[0];
        var reader = new FileReader();
        reader.onloadend = function () {
            $("#base64Img").attr("style","display:inline-block");
            $("#base64Img").attr("src",reader.result);

            console.log(reader.result);

        }
        if (file) {
            reader.readAsDataURL(file);
        }
    }



</script>

</html>

